<template>
  <div class="box">
    <div class="box_one">
      <div class="box_list">1</div>
      <div class="box_content">
        <div class="early_title">规划设计与实施方案编制单位选取方式</div>
        <div class="early_select">
          <span>选取方式</span>
          <el-select v-model="value" placeholder="--请选择--" @change="changeValue">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div class="early_select" v-show="flag1">
          <span>招标文件</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox1" @beforeUpload="beforeUpload" @res="getRes($event,1)" :accept="'.pdf'" />
          </div>
          
        </div>
        <div class="early_select" v-show="flag2">
          <span>采购文件</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox2" @beforeUpload="beforeUpload" @res="getRes($event,2)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select" v-show="flag3">
          <span>抽取报告</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox3" @beforeUpload="beforeUpload" @res="getRes($event,3)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">2</div>
      <div class="box_content">
        <div class="early_title">规划设计与实施方案编制单位名称</div>
        <!-- <div class="early_select">
          <span>单位是否已在诚信管理系统注册</span>
          <el-radio-group v-model="radio" @change='changeRadio'>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </div> -->
        <div class="early_select early_selectTwo" >
          <!-- <div v-if='isCompany==1'> -->
            <div >
            <span>机构名称：</span>
              <el-select v-model="companyValue" filterable placeholder="--请选择--" @change="changeCompany">
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
          </div>
          <!-- <div v-if='isCompany==2' class="lineBlo">
            <span>机构名称：</span>
              <el-input v-model="inputCompany" placeholder="请输入"></el-input>
          </div> -->
          
        </div>
        <div class="early_select early_selectTwo" v-show="flag1">
          <span>中标通知书</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox4" @beforeUpload="beforeUpload" @res="getRes($event,4)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag2">
          <span>中选/标通知书</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox5" @beforeUpload="beforeUpload" @res="getRes($event,5)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag3">
          <span>抽取公告</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox6" @beforeUpload="beforeUpload" @res="getRes($event,6)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">3</div>
      <div class="box_content">
        <div class="early_title">合同信息</div>

        <div class="early_select">
          <span>已签订的合同</span>
          <div class="upLoadImg ">
            <upload ref="hetongBox7" @beforeUpload="beforeUpload" @res="getRes($event,7)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <!-- <embed  height=200 width=200> -->

    <div class="btn">
      <el-button size="medium" :disabled="noUpload" :loading='isLoading' type="primary" @click="btn_submit">提交</el-button>
      <el-button size="medium" @click="getCancel">取消</el-button>
    </div>
  
  </div>
</template>

<script>
import { constants } from "crypto";
import { upImg } from "@/api/upImg";
import { query_selection_mode,query_all_map_enterprise,save } from "@/api/implementUnit";
import upload from "@/components/upload";
export default {
  components: {
    upload
  },
  data() {
    return {
      noUpload:false,
      options: [],
      value: "G_K_Z_B",
      radio: "",
      flag1: true,
      flag2: true,
      flag3: true,
      fileList: "",
      uploadText1:'上传',
      fileData1:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText2:'上传',
      fileData2:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText3:'上传',
      fileData3:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText4:'上传',
      fileData4:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText5:'上传',
      fileData5:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText6:'上传',
      fileData6:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      uploadText7:'上传',
      fileData7:{
        fileName:'',  
        fileUrl:'',  
        id:'',
      },
      inputCompany:'',
      companyValue:'',
      isCompany:'',
      companyName:'',
      companyList:[],
      isLoading:false,

      wenjianObj: {
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
    };
  },
  created(){
    this.getSelectWay()
    this.getCompany()
    this.changeValue()
  },
  methods: {
    //上传前
    beforeUpload() {
      this.isLoading = true;
    },
    //上传后
    getRes(res, index) {
      this.wenjianObj["wenjian" + index].fileName = res.data.fileName;
      this.wenjianObj["wenjian" + index].fileUrl = res.data.filePath;
      this.wenjianObj["wenjian" + index].id = res.data.id;
      this.noUpload = false;
      this.isLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    btn_submit(){//提交
      const that=this
      if(that.value==0){
        that.$message({
          message: '请选择选取方式',
          type: 'warning'
        });
        return
      }
      // if(that.radio==''){
      //   that.$message({
      //     message: '单位是否已在诚信管理系统注册?',
      //     type: 'warning'
      //   });
      //   return
      // }
      
      let obj={
        projectId:localStorage.getItem("projectId"),
        selectionMode:that.value,
        contractFileId:that.wenjianObj.wenjian7.id,
        appEnterpriseId:that.companyValue
      }
      // if(that.radio==1){
      //   if(that.companyValue==''){
      //     that.$message({
      //       message: '请选择规划设计与实施方案编制单位名称',
      //       type: 'warning'
      //     });
      //     return
      //   }
      //   obj['appEnterpriseId']=that.companyValue
      // }else if(that.radio==2){
      //   if(that.inputCompany==''){
      //     that.$message({
      //       message: '请输入规划设计与实施方案编制单位名称',
      //       type: 'warning'
      //     });
      //     return
      //   }
      //   obj['appEnterpriseName']=that.inputCompany
      // }
      if(that.value=='G_K_Z_B'){
        
        obj['tenderingFileId']=that.wenjianObj.wenjian1.id
        obj['winBidFileId']=that.wenjianObj.wenjian4.id
      }else if(that.value=='Z_F_C_G'){
        
        obj['purchaseFileId']=that.wenjianObj.wenjian2.id
        obj['winElectionFileId']=that.wenjianObj.wenjian5.id
      }else if(that.value=='J_K_S_J_C_Q'){
        
        obj['extractNoticeFileId']=that.wenjianObj.wenjian3.id
        obj['extractResultNoticeFileId']=that.wenjianObj.wenjian6.id
      }
      console.log(obj,'obj')
      that.isLoading=true
      save(obj).then(res=>{
        this.isLoading=false
        console.log(res,'tijiao')
        if(res.code==1000){
          that.$message({
            message: '提交成功',
            type: 'success'
          });
        }else{
          that.$message({
            message: res.msg,
            type: 'error'
          });
        }
        that.getCancel()
      }).catch(error=>{
          this.isLoading=false
        });
    },
    
    // changeRadio(){//单选按钮
    //   console.log(this.radio,'radio')
    //   if(this.radio==1){
    //     this.isCompany=1
    //   }else if(this.radio==2){
    //      this.isCompany=2
    //   }
    // },
    changeValue() {
      this.$nextTick(()=>{
        this.$refs.hetongBox7.setValue(1)
      })
      console.log(this.value);
      if (this.value == 0) {
        this.flag1 = false;
        this.flag2 = false;
        this.flag3 = false;
        this.isCompany=''
        this.radio=''
        this.getClear()
      } else if (this.value == 'G_K_Z_B') {
        this.flag1 = true;
        this.flag2 = false;
        this.flag3 = false;
        this.isCompany=''
        this.radio=''
        this.$nextTick(()=>{
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox5.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == 'Z_F_C_G') {
        this.flag2 = true;
        this.flag1 = false;
        this.flag3 = false;
         this.isCompany=''
        this.radio=''
        this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == 'J_K_S_J_C_Q') {
        this.flag3 = true;
        this.flag1 = false;
        this.flag2 = false;
        this.isCompany=''
        this.radio=''
        this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox5.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      }
    },
    getSelectWay(){//选取方式
        query_selection_mode().then(res=>{
          console.log(res,'res')
          this.options=res.data
          this.options.unshift({
            value: "0",
            code:'0',
            name: "--请选择--"
          })
        })
    },
    changeCompany(){//获取公司
      console.log(this.companyValue,'companyValue')
      //this.companyName
      this.companyList.forEach(item=>{
        if(this.companyValue==item.id){
          this.companyName=item.name
        }
      })
    },
    getCompany(){//查询在诚信管理系统中采集的规划设计与实施方案编制单位
      query_all_map_enterprise().then(res=>{
          console.log(res,'res')
          this.companyList=res.data
      })
    },
    getCancel(){//取消
     
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
      this.getClear()
    },
    getClear(){//清空值
     this.$nextTick(()=>{
        this.$refs.hetongBox1.setValue(1)
        this.$refs.hetongBox2.setValue(1)
        this.$refs.hetongBox3.setValue(1)
        this.$refs.hetongBox4.setValue(1)
        this.$refs.hetongBox5.setValue(1)
        this.$refs.hetongBox6.setValue(1)
        this.$refs.hetongBox7.setValue(1)
      })
      this.value=''
      this.wenjianObj={
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
      this.isLoading=false
      this.radio=''
      this.isCompany=''
    }
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 60px;
  .box_one {
    display: flex;
    .box_list {
      background: #2e8ae6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 20px;
      color: white;
      margin-top: 8px;
    }

    .box_content {
      margin-left: 20px;

      .early_title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        line-height: 50px;
        margin-bottom: 20px;
      }
      .early_select {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #444;
        font-weight: bold;
        margin-bottom: 25px;
        span {
          margin-right: 20px;
        }
        .upLoadImg{
          display: flex;
          align-items: center;
          
          .btnUpload {
            width: 90px;
            margin-right: 20px;
          }
        }
        
      }
    }
  }
  .box_two {
    .box_list {
      opacity: 0.5;
    }
    .box_content {
      .early_selectTwo {
        // display:flex;
        // align-items: center;
        span {
          width: 90px;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {
    // text-align: center;
    margin-top: 20px;
    margin-left: 50px;
  }
  .lineBlo{
    display: flex;
    align-items: center;
  }
}
</style>
